<template>
  <el-container>
    <el-header>
      <h1>标识信息录入</h1>
    </el-header>
    <el-main>
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">CAS号：</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light">
            <el-input v-model="message.baseinfoCas" placeholder="请输入内容"/>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">C.I.：</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light">
            <el-input v-model="message.baseinfoCi" placeholder="请输入内容"/>
          </div>
        </el-col>
      </el-row>
      <br>
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">中文名称：</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light">
            <el-input v-model="message.baseinfoZwmc" placeholder="请输入内容"/>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">中文其它名称：</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light">
            <el-input v-model="message.baseinfoZwqtmc" placeholder="请输入内容"/>
          </div>
        </el-col>
      </el-row>
      <br>
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">英文名称：</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light">
            <el-input v-model="message.baseinfoYwmc" placeholder="请输入内容"/>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">英文其他名称：</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light">
            <el-input v-model="message.baseinfoYwqtmc" placeholder="请输入内容"/>
          </div>
        </el-col>
      </el-row>
      <br>
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">IUPAC名称：</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light">
            <el-input v-model="message.baseinfoIupac" placeholder="请输入内容"/>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">物质编码：</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light">
            <el-input v-model="message.baseinfoWzbm" placeholder="请输入内容"/>
          </div>
        </el-col>
      </el-row>
      <br>
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">SMILES码：</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light">
            <el-input v-model="message.baseinfoSmiles" placeholder="请输入内容"/>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">分子式：</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light">
            <el-input v-model="message.baseinfoFzs" placeholder="请输入内容"/>
          </div>
        </el-col>
      </el-row>
      <br>
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">相对分子质量：</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light">
            <el-input v-model="message.baseinfo_xdfzzl" placeholder="请输入内容"/>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">结构式：</div>
        </el-col>
        <el-col :span="6">
          <div v-if="changeStrPic">
            <img :src="message.picBase64">
          </div>
          <div class="grid-content bg-purple-light">
            <!-- <el-input v-model="message.baseinfo_jgs" placeholder="请输入内容" /> -->
            <el-upload
              ref="uploadAvatar"
              class="avatar-uploader"
              action=""
              :show-file-list="false"
              :auto-upload="false"
              :on-change="changeFile"
            >
              <img v-if="imageUrl" :src="imageUrl" class="uploadAvatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"/>
            </el-upload>

          </div>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
    export default {
        name: 'Mark',
        props: ['message'],
        data() {
            return {
                imageUrl: '',
                imageBaseUrl: '',
                changeStrPic: true

            }
        },
        methods: {
            /**
             * 文件框改变事件
             * @param file
             * @param fileList
             */
            changeFile(file, fileList) {
                const isJPGORPNG = (file.raw.type === 'image/jpeg' || file.raw.type === 'image/png')
                const isLt1M = file.size / 1024 / 1024 < 1

                if (!isJPGORPNG) {
                    this.$message.info('上传头像图片只能是 JPG 或 PNG 格式!')
                    this.changeStrPic = true
                    return
                }
                if (!isLt1M) {
                    this.$message.info('上传头像图片大小不能超过 1MB!')
                    this.changeStrPic = true
                    return
                }

                var This = this
                var reader = new FileReader()
                reader.readAsDataURL(file.raw)
                reader.onload = function (e) {
                    this.result // base64编码
                    This.imageUrl = this.result
                    This.message.picBase64 = this.result
                }
                this.message.baseinfo_jgs = this.imageUrl
                this.message.picBase64 = this.result
                this.changeStrPic = false
            }
        }
    }
</script>

<style scoped lang="scss">
  .title {
    position: absolute;
    left: 0px;
  }

  .content {
    position: absolute;
    top: 100px;
    left: 20%;
    right: 25%;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
